<template>
    <div id="basic">
      <!-- <div class="title">成人膳食测评报告</div>
      <div id="createTime">报告日期：{{ report_time }}</div>
      <el-divider  border-style="dashed"  style="border-color:#2196f3">
        <div class="subTitle">膳食分析</div>
      </el-divider>
      <div class="images-wrapper topColor" v-if="kcalType === 1">
        <img src="../../assets/img/evaluation_top_bg.png" alt="" style="width: 100%;height: 100%;float: left;">
        <div class="images-content">
          您的营养摄入
        </div>
        <div class="images-lab">
          {{ letEnergy.energy }} <span>kcal</span>
        </div>
        <div class="images-right topBgColor">
          <img src="../../assets/img/evaluation_top_triangle.png" alt="" style="width:18px; height:11px;">
          超标 {{ letEnergy.energy - letEnergy.end }} kcal
        </div>
      </div> -->
  
      <!-- <div class="images-wrapper normalColor" v-else-if="kcalType === 2">
        <img src="../../assets/img/evaluation_normal_bg.png" alt="" style="width: 100%;height: 100%;float: left;">
        <div class="images-content">
          您的营养摄入
        </div>
        <div class="images-lab">
          {{ letEnergy.energy }} <span>kcal</span>
        </div>
        <div class="images-right normalBgColor">
          <img src="../../assets/img/evaluaction_normal_triangle.png" alt=""
               style="line-height:25px;width:17px; height:17px;">
          达标
        </div>
      </div> -->
  
      <!-- <div class="images-wrapper bottomColor" v-else-if="kcalType === 3">
        <img src="../../assets/img/evaluation_bottom_bg.png" alt="" style="width: 100%;height: 100%;float: left;">
        <div class="images-content">
          您的营养摄入
        </div>
        <div class="images-lab">
          {{  letEnergy.energy }} <span>kcal</span>
        </div>
        <div class="images-right bottomBgColor">
          <img src="../../assets/img/evaluaction_bottom_triangle.png" alt=""
               style="line-height:25px;width:17px; height:17px;">
          不足 {{  letEnergy.start - letEnergy.energy }} kcal
        </div>
      </div> -->
  
      <!-- <div id="enerty">
        <div id="params">
          <div class="shu"></div>
          详细参数 <span>一天膳食摄入总能量：{{  letEnergy.energy }}卡，距离标准范围差{{  letEnergy.start - letEnergy.energy }}卡，具体如下：</span></div>
        <ul>
          <li class="bt"><span>元素</span><span>状态</span><span>分析值</span><span>参考范围</span></li>
          <li class="bt"><span>元素</span><span>状态</span><span>分析值</span><span>参考范围</span></li>
          <li class="element" :class="[letEnergy.color]"><span>能量</span><span>{{ letEnergy.keyword }}</span><span >{{  letEnergy.energy }}kcal</span><span>{{  letEnergy.start }}～{{ letEnergy.end }}</span></li>
          <li class="element" :class="[protein.color]"><span>蛋白质</span><span>{{ protein.keyword }}</span><span>{{ protein.energy }}g</span><span>{{ protein.start }}～{{ protein.end }}</span></li>
          <li class="element" :class="[fat.color]"><span>脂肪</span><span>{{ fat.keyword }}</span><span>{{ fat.energy }}g</span><span>{{ fat.start }}～{{ fat.end }}</span></li>
          <li class="element" :class="[carbohydrate.color]"><span>碳水化合物</span><span>{{ carbohydrate.keyword }}</span><span>{{ carbohydrate.energy }}g</span><span>{{ carbohydrate.start }}～{{ carbohydrate.end }}</span></li>
          <li class="element" :class="[calcium.color]"><span>钙</span><span>{{ calcium.keyword }}</span><span>{{ calcium.energy }}mg</span><span>{{ calcium.start }}～{{ calcium.end }}</span></li>
          <li class="element" :class="[sodium.color]"><span>钠</span><span>{{ sodium.keyword }}</span><span>{{ sodium.energy }}c</span><span>{{ sodium.start }}～{{ sodium.end }}</span></li>
          <li class="element" :class="[magnesium.color]"><span>镁</span><span>{{ magnesium.keyword }}</span><span>{{ magnesium.energy }}mg</span><span>{{ magnesium.start }}～{{ magnesium.end }}</span></li>
          <li class="element" :class="[iron.color]"><span>铁</span><span>{{ iron.keyword }}</span><span>{{ iron.energy }}mg</span><span>{{ iron.start }}～{{ iron.end }}</span></li>
          <li class="element" :class="[zinc.color]"><span>锌</span><span>{{ zinc.keyword }}</span><span>{{ zinc.energy }}mg</span><span>{{ zinc.start }}～{{ zinc.end }}</span></li>
          <li class="element" :class="[selenium.color]"><span>硒</span><span>{{ selenium.keyword }}</span><span>{{ selenium.energy }}μg</span><span>{{ selenium.start }}～{{ selenium.end }}</span></li>
          <li class="element" :class="[vitamin_a.color]"><span>维生素A</span><span>{{ vitamin_a.keyword }}</span><span>{{ vitamin_a.energy }}μgRE</span><span>{{ vitamin_a.start }}～{{ vitamin_a.end }}</span></li>
          <li class="element" :class="[vitamin_e.color]"><span>维生素E</span><span>{{ vitamin_e.keyword }}</span><span>{{ vitamin_e.energy }}mg</span><span>{{ vitamin_e.start }}～{{ vitamin_e.end }}</span></li>
          <li class="element" :class="[vitamin_b1.color]"><span>维生素B1</span><span>{{ vitamin_b1.keyword }}</span><span>{{ vitamin_b1.energy }}mg</span><span>{{ vitamin_b1.start }}～{{ vitamin_b1.end }}</span></li>
          <li class="element" :class="[vitamin_b2.color]"><span>维生素B2</span><span>{{ vitamin_b2.keyword }}</span><span>{{ vitamin_b2.energy }}mg</span><span>{{ vitamin_b2.start }}～{{ vitamin_b2.end }}</span></li>
          <li class="element" :class="[vitamin_c.color]"><span>维生素C</span><span>{{ vitamin_c.keyword }}</span><span>{{ vitamin_c.energy }}mg</span><span>{{ vitamin_c.start }}～{{ vitamin_c.end }}</span></li>
        </ul>
        <div id="params">
          <div class="shu"></div>
          取餐建议
        </div>
  
        <div class="dietOn" v-for="item in diet_analysis" :key="item">
          <div class="time-botton">
            <img src="../../assets/img/evaluaction_service_icon.png" alt="" style="width:15px; height:15px;">
            {{ item.pName }}
          </div>
          <div class="plates">
            <div class="time-type time-left-color">早餐</div>
            <div class="der">
              <div style="margin-left:6%;padding-top: 6%;">
                <span class="plates-top-img" v-for="breakfast in item.早餐" :key="breakfast"><img :src=" 'http://'+baseUrl+'/' + breakfast.meal_image" alt=""  style="width: 100%;height: 100%"></span>
                <span class="plates-top-img" v-for="earlier in item.早点" :key="earlier"><img :src="'http://'+baseUrl+'/' + earlier.meal_image" alt=""  style="width: 100%;height: 100%"></span>
              </div>
            </div>
            <div class="platesFoods">
              <div>大小：{{ item.multiple }}倍</div>
              <div>早餐7:00: <span v-for="breakfast in item.早餐" :key="breakfast"><o class="foodsNames">{{  breakfast.food_name }}</o> 重量:{{ breakfast.weight }}g; </span></div>
              <div>早点10:00: <span v-for="earlier in item.早点" :key="earlier"><o class="foodsNames">{{  earlier.food_name }}</o> 重量:{{ earlier.weight }}g; </span></div>
            </div>
          </div>
  
          <div class="plates">
            <div class="time-type time-common-color">午餐</div>
            <div class="der">
              <div style="">
                <span class="plates-top-img" v-for="lunch in item.午餐" :key="lunch"><img :src=" 'http://'+baseUrl+'/' + lunch.meal_image" alt="" style="width: 100%;height: 100%"></span>
                <span class="plates-top-img" v-for="noon in item.午点" :key="noon"><img :src="'http://'+baseUrl+'/' + noon.meal_image" alt="" style="width: 100%;height: 100%"></span>
              </div>
            </div>
  
            <div class="platesFoods">
              <div>大小：{{ item.multiple }}倍</div>
              <div>午餐12:00: <span v-for="lunch in item.午餐" :key="lunch"><o class="foodsNames">{{  lunch.food_name }}</o> 重量:{{ lunch.weight }}g; </span></div>
              <div>午点15:00: <span v-for="noon in item.午点" :key="noon"><o class="foodsNames">{{  noon.food_name }}</o> 重量:{{ noon.weight }}g; </span></div>
            </div>
          </div>
  
          <div class="plates">
            <div class="time-type time-right-color">晚餐</div>
            <div class="der">
              <div style="margin-left:6%;padding-top: 6%;">
                <span class="plates-top-img" v-for="dinner in item.晚餐" :key="dinner"><img :src=" 'http://'+baseUrl+'/' + dinner.meal_image" alt="" style="width: 100%;height: 100%"></span>
                <span class="plates-top-img" v-for="late in item.晚点" :key="late"><img :src="'http://'+baseUrl+'/' + late.meal_image" alt="" style="width: 100%;height: 100%"></span>
              </div>
            </div>
  
            <div class="platesFoods">
              <div>大小：{{ item.multiple }}倍</div>
              <div>晚餐18:00: <span v-for="dinner in item.晚餐" :key="dinner"><o class="foodsNames">{{  dinner.food_name }}</o> 重量:{{ dinner.weight }}g; </span></div>
              <div>晚点21:00: <span v-for="late in item.晚点" :key="late"><o class="foodsNames">{{  late.food_name }}</o> 重量:{{ late.weight }}g; </span></div>
            </div>
          </div>
  
        </div>
        <div style="clear: both"></div>
        <div class="params ">
          <div class="shu"></div>
          喂养建议</div>
        <span>{{ form.elText }}</span>
        <div style="clear: both"></div>
        <div class="params " style="margin-top: 20px">
          <div class="shu"></div>
          营养建议</div>
        <span>{{ form.elTextTwo }}</span>
        <div style="clear: both"></div>
        <div class="params " style="margin-top: 20px">
          <div class="shu"></div>
          医生建议</div>
        <span>{{ form.elTextThree }}</span>
      </div> -->
  
        <!-- 膳食营养分析报告 -->
      <div style="display: flex;">
        <div style=" width: 60%; background-color:#2196f3; height: 100px; text-align: center; line-height: 100px;">
          <span style="font-size: 30px; font-weight: bold; color: #ffffff">成人</span><span style="font-size: 30px; color: #666666; margin-left: 20px">膳食营养分析报告</span>
        </div>
        <div style="height: 100px; width: 40%;background-color:#2196f3;">
          <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt=""/> -->
        </div>
      </div>
       <div style="width: 100%; height: 40px; background-color: #2196f3; margin-top: 10px; display: flex;">
          <div><img src="../../assets/img/12_1.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">成人基本信息</div>
        </div>
           <div style="width: 1070px; border-top: 2px solid #2196f3; border-right: 2px solid #2196f3;  margin-top: 10px">
              <div style="display: flex">
                <div style="background-color: #2196f3; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">检测日期</div>
                <div style="width: 90%; height: 40px; border-bottom: 2px solid #2196f3; line-height: 40px; text-indent: 20px;">
                  {{ report_time }}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  成人姓名
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  {{contents.username ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
                  性别
                </div>
                <div style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
                  {{contents.sex == 1 ? '女':'男' ?? '[]'}}
                </div>
                <div style="background-color: #2196f3; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
                  出生日期
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  {{birth ?? '[]'}}
                </div>
                <div style=" background-color: #2196f3; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  监护人姓名
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.guardian_name ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  监护人手机号
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >
                  {{contents.guardian_mobile ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  身高
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.height ?? '[]'}}CM
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  体重
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.weight ?? '[]'}}KG
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  头围
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.touwei ?? '[]'}}CM
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  出生身长
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.chushengsg ?? '[]'}}CM
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  出生体重
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.chushengtz ?? '[]'}}KG
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  腹围
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.fuwei ?? '[]'}}CM
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  血型
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.xuexing_value ?? '[]'}}
                </div>
              </div>
              <div style="display: flex">
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  民族
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.minzu_value ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  监护关系
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.guanxi_value ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  家长教育
                </div>
                <div style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; " >{{contents.jiaoyu_value ?? '[]'}}
                </div>
                <div style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
                  出生情况
                </div>
                <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
                  {{contents.birthSituation_value ?? '[]'}}
                </div>
              </div>
            </div>
  
  
      <div style="width: 100%; height: 40px;background-color: #2196f3;margin-top: 20px;display: flex;">
        <div><img src="../../assets/img/14_1.png" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
          膳食记录
        </div>
      </div>
     <div style="width:98%;border:2px solid #2196f3;text-align:center;font-size:12px;margin-top:20px;margin-left:10px;">
          <div style="display:flex">
            <div class="biao1" style="width:16%;height:40px;line-height:40px">菜名</div>
            <div class="biao1" style="width:12%;height:40px;line-height:40px">能量</div>
            <div class="biao1" style="width:12%;height:40px;line-height:40px">脂肪</div>
            <div class="biao1" style="width:12%;height:40px;line-height:40px">钙</div>
            <div class="biao1" style="width:12%;height:40px;line-height:40px">镁</div>
            <div class="biao1" style="width:12%;height:40px;line-height:40px">锌</div>
            <div class="biao1" style="width:12%;height:40px;line-height:40px">维生素A</div>
            <div class="biao1" style="width:12%;height:40px;line-height:40px">维生素B1</div>
          </div>
          <div  v-for="(item,index) in diet" :key="index">
            <div style="display:flex;">
              <div class="biao2" style="width:16%;height:40px;line-height:40px">{{item.food_name}}</div>
              <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.energy ?? 0}}</div>
              <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.fat ?? 0}} </div>
              <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.calcium ?? 0}}</div>
              <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.magnesium ?? 0}}</div>
              <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.zinc ?? 0}}</div>
              <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.vitamin_a ?? 0}}</div>
              <div class="biao2" style="width:12%;height:40px;line-height:40px">{{item.vitamin_b1 ?? 0}}</div>
            </div>
          </div>
        </div>
        <div style="width:98%;border:2px solid #2196f3;text-align:center;font-size:12px;margin-top:20px;margin-left:10px;">
          <div style="display:flex">
              <div class="biao1" style="width:16%;height:40px;line-height:40px">菜名</div>
            <div class="biao1" style="width:10.5%;height:40px;line-height:40px">维生素C</div>
            <div class="biao1" style="width:10.5%;height:40px;line-height:40px">蛋白质</div>
            <div class="biao1" style="width:10.5%;height:40px;line-height:40px">碳水</div>
            <div class="biao1" style="width:10.5%;height:40px;line-height:40px">钠</div>
            <div class="biao1" style="width:10.5%;height:40px;line-height:40px">铁</div>
            <div class="biao1" style="width:10.5%;height:40px;line-height:40px">硒</div>
            <div class="biao1" style="width:10.5%;height:40px;line-height:40px">维生素E</div>
            <div class="biao3" style="width:10.5%;height:40px;line-height:40px">维生素B2</div>
          </div>
          <div  v-for="(item,index) in diet" :key="index">
            <div style="display:flex;">
                <div class="biao2" style="width:16%;height:40px;line-height:40px">{{item.food_name}}</div>
              <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.vitamin_c ?? 0}}</div>
              <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.protein ?? 0}}</div>
              <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.carbohydrate ?? 0}}</div>
              <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.sodium ?? 0}}</div>
              <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.iron ?? 0}}</div>
              <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.selenium ?? 0}}</div>
              <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.vitamin_e ?? 0}}</div>
              <div class="biao2" style="width:10.5%;height:40px;line-height:40px">{{item.vitamin_b2 ?? 0}}</div>
            </div>
          </div>
        </div>
           <ChildViewDietary></ChildViewDietary>
          <!-- 能量&营养摄入量分析 -->
        <div style="width: 100%;height: 40px; background-color: #2196f3;margin-top: 20px;display: flex;">
          <div><img src="../../assets/img/17.png" style="height: 40px" alt="" /></div>
          <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
            能量&营养摄入量分析
          </div>
        </div>
         <div style="width:98%;border:2px solid #2196f3;margin-top:20px;margin-left:10px;">
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">能量</div>
                  <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="energys">
                  </div>
                </div>
              </div>
              <div style="display:flex;">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">蛋白质</div>
                  <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="proteins">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">脂肪</div>
                  <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="fats">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 碳水化合物
                </div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="carbohydrates">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;">钙</div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="calciums">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 钠</div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="sodiums">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 镁</div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="magnesiums">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 铁</div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="irons">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 锌</div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="zincs">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 硒</div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="seleniums">
                  </div>
                </div>
              </div>
              <div style="display:flex;">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素A
                </div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="vitamin_as">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素E
                </div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="vitamin_es">
                  </div>
                </div>
              </div>
              <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素B1
                </div>
                <div class="biao4" style="width:90%;padding-left: 5px;">
                  <div v-html="vitamin_b1s">
                  </div>
                </div>
              </div>
              </div>
              <div style="margin-left: 10px;">
                <div style="display:flex">
                <div class="biao1"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素B2
                </div>
                <div class="biao7" style="width:90%;padding-left: 5px;">
                  <div v-html="vitamin_b2s">
                  </div>
                </div>
              </div>
                <div style="display:flex">
                  <div class="biao5"
                  style="width:10%;line-height:20px;display: flex;justify-content: center;align-items: center;"> 维生素C
                </div>
                <div class="biao7" style="width:90%;padding-left: 5px;">
                  <div v-html="vitamin_cs">
                  </div>
                </div>
                </div>
               
              </div>
              <!-- 膳食结构分析(日均值) -->
                <div style="
          width: 100%;
          height: 40px;
          background-color: #2196f3;
          margin-top: 100px;
          display: flex;
        " >
              <div><img src="../../assets/img/19_1.png" style="height: 40px" alt="" /></div>
              <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
                膳食结构分析(日均值)
              </div>
            </div>
              <!-- <div style=" page-break-after:left;"></div> -->
            <div style="width:98%;border:2px solid #2196f3;text-align:center;line-height:40px;margin-top:20px;margin-left:10px;">
              <div style="display:flex;">
                <div class="biao1" style="width:12.5%">膳食结构</div>
  
                <div class="biao1" v-for="(item,index) in pagoda" :key="index" style="width:12.5%">{{ item.title==undefined?'':item.title }}</div>
              </div>
              <div style="display:flex;">
                <div class="biao1" style="width:12.5%">推荐(g)</div>
                <div class="biao2" v-for="(item,index) in pagoda" :key="index" style="width:12.5%">{{ item.title==undefined?'':item.systam_down +'~'+ item.systam_up }}</div>
              </div>
              <div style="display:flex;">
                <div class="biao5" style="width:12.5%">实际</div>
                <div class="biao6" v-for="(item,index) in pagoda" :key="index" style="width:12.5%">{{ item.title==undefined?'':item.product_energy }}</div>
              </div>
            </div>
    </div>
  </template>
  
  
  <script setup>
  import {defineComponent, onMounted, ref, watch} from 'vue';
  import {ElMessage} from "element-plus";
  import * as api from "../../api/loginHttp";
  import http, {baseUrl} from "../../utils/http";
  import {useRoute, useRouter} from "vue-router"
  import PrintJS from 'print-js'
  // import ChildViewDietary from '../common/ChildViewdietarys1.vue';
  import * as echarts from 'echarts'
  
  const router = useRouter()
  const energys=ref({})
  const route = useRoute()
  const labName = ref()
  const groupId = ref()
  const fats = ref({})
  const carbohydrates = ref({})
  const calciums = ref({})
  const sodiums = ref({})
  const magnesiums = ref({})
  const irons = ref({})
  const zincs = ref({})
  const seleniums = ref({})
  const intake = ref({})
  const vitamin_as = ref({})
  const vitamin_es = ref({})
  const vitamin_b1s = ref({})
  const vitamin_b2s = ref({})
  const vitamin_cs = ref({})
  const proteins = ref({})
  const reportId = ref()
  const id = ref()
  const early_intervention=ref({})
  const Monitoring_content=ref({})
  const high_contents=ref({})
  const contents = ref({})
  const pagoda = ref({})
  const principle = ref({})
  const diet = ref({})
  
  const username = ref()
  const guardian = ref()
  const birthStatus = ref()
  const birth = ref()
  const imgUrl = ref()
  const form = ref({
    elText:'',
    elTextTwo:'',
    elTextThree:'',
  })
  
  const letEnergy = ref({'energy': 0, 'start':0, 'end':0})
  const protein = ref({'energy': 0, 'start':0, 'end':0})
  const fat = ref({'energy': 0, 'start':0, 'end':0})
  const carbohydrate= ref({'energy': 0, 'start':0, 'end':0})
  const calcium = ref({'energy': 0, 'start':0, 'end':0})
  const sodium = ref({'energy': 0, 'start':0, 'end':0})
  const magnesium = ref({'energy': 0, 'start':0, 'end':0})
  const iron = ref({'energy': 0, 'start':0, 'end':0})
  const zinc = ref({'energy': 0, 'start':0, 'end':0})
  const selenium = ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_a =ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_e = ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_b1 = ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_b2 = ref({'energy': 0, 'start':0, 'end':0})
  const vitamin_c =ref({'energy': 0, 'start':0, 'end':0})
  const diet_analysis = ref({})
  const hospital_name = ref()
  const report_time = ref()
  const data = ref()
  const onHome = async () => {
    await router.push({'path': '/Home'})
  }
  const kcalType = ref(2)
  
  const fetchData = async () => {
    if (route.params.groupId) {
      groupId.value = route.params.groupId
      id.value = route.params.id
      reportId.value = route.params.reportId
  
      username.value = route.params.username
      guardian.value = route.params.guardian
      birthStatus.value = route.params.birth
      if (groupId.value === 3) {
        labName.value = '婴幼儿营养测评'
      } else if (groupId.value === 5) {
        labName.value = '孕产妇营养测评'
      } else if (groupId.value === 6) {
        labName.value = '成年人营养测评'
      } else if (groupId.value === 7) {
        labName.value = '慢性病营养测评'
      } else {
        labName.value = '婴幼儿营养测评'
      }
  
  
      http.get('api/archives/viewReportMember?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=> {
        if(res.data.code === 0) {
          ElMessage.error(res.data.msg)
        }
        report_time.value = res.data.data.times
        contents.value = res.data.data.contents;
        birth.value = res.data.data.contents.birth;
  
  
        if(res.data.data.feed_advice != '' && res.data.data.feed_advice != null) {
          form.value.elText = res.data.data.feed_advice;
        } else {
          form.value.elText = '当膳食方案中有食谱或食材不符合您的膳食习惯时，请先与医生确认，若医生认为某些食材对成人的膳食营养改善很重要，要求不能置换或最好不要置换；其他类可进行同类食材替换，例如：猪肉、牛肉、羊肉之间可互换，鸡肉、鸭肉、鱼类之间可互换，蔬菜间可互换，米面间可互换，但要注意不要更改食材用量。\n' +
              '给成人烹调食物时，宜尽可能保持食物的原味，口味以清淡为宜，少放调料。\n' +
              '每天应当进行至少1小时的户外游戏或运动，每天看电视、玩平板电脑的累计时间不超过2小时，日常生活中还可适当增加一些有氧活动例如：自行车、慢跑、跳绳、仰卧起坐、游泳等。';
        }
  
        if(res.data.data.nutrition_advice != '' && res.data.data.nutrition_advice != null) {
          form.value.elTextTwo = res.data.data.nutrition_advice;
        } else {
          form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的成人生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
              '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
          if(contents._rawValue.hair_value !='' || contents._rawValue.oralCavity_value != '' || contents._rawValue.neck_value != '' || contents._rawValue.Neuropathy_value != '' || contents._rawValue.symptoms_value != '') {
            form.value.elTextTwo = '这个阶段是饮食行为和生活方式形成的关键时期，7岁前的成人生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n' +
                '家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。';
          } else if(contents._rawValue.eye_value !='' ) {
            form.value.elTextTwo = '平衡膳食，多摄入动物肝、肾、奶、蛋和深绿或红黄蔬菜、水果等富维生素A和β胡萝卜素食物。婴儿要及时添加含动物肝等辅食，没有母乳的婴儿需配方奶喂养。生后及时按预防量补充维生素A。幼儿膳食中要注意脂肪和含维生素A和β胡萝卜素食物搭配食用。患消化系统疾病及消耗性疾病的患儿需及时补充维生素A制剂。\n' +
                '长期摄入不足是导致维生素A缺乏的主要原因，成人维生素A的主要来自1、肝脏、鱼油、奶制品、鸡蛋等动物性食物；2、绿叶蔬菜以及黄色或橙色的水果和蔬菜中富含各种胡罗卜素，可在体内转变为维生素A。对于人体来说，动物性食物中的VA要比植物性中的VA更容易吸收。';
          } else if(contents._rawValue.skin_value !='' ) {
            form.value.elTextTwo = '谷类、硬果、动物内脏、蛋类及酵母中维生素B1含量丰富，但需要注意谷类加工过度可损失维生素B1，以及生鱼和贝类含有破坏维生素B1的酶，所以在日常饮食中不长期食用精米、生鱼和贝类。还需要注意的是维生素B1易溶于水，在碱性条件下易受热破坏，所以过分淘米或烹调中加碱也可导致维生素B1大量损失。\n' +
                '富含维生素B2的食物主要是动物肝脏（如肝、肾、心）等、蛋黄和乳类。谷类的精细加工会导致所含的维生素B2流失，所以成人日常饮食中还需要增加粗粮的比例以及保证每日鸡蛋和牛奶的摄入。';
          } else if(contents._rawValue.sign_value !='' ) {
            form.value.elTextTwo = '足量的食物，平衡膳食，规律就餐，不偏食不挑食，每天饮奶多喝水，避免含糖饮料，是保障成人生长发育的关键。日常生活中选择健康有营养的零食，避免含糖饮料和高脂肪的油炸食物，导致成人正餐不按量食用。\n' +
                '营养不良的成人，要在保证能量摄入充足的基础上，增加鱼、禽、蛋、瘦肉、豆制品等富含优质蛋白质的食物的摄入，经常使用奶及奶制品，每天吃新鲜的蔬菜水果；保证一日三餐，纠正偏食和过度节食等不健康饮食行为，并保持适宜的身体活动。';
          } else if(contents._rawValue.sign_value !='') {
            form.value.elTextTwo = '奶和奶制品是成人钙的主要来源，也是最佳来源。绿色蔬菜、大豆及其制品特殊含有较高的钙，可作为补充来源。 需要特别注意的是钙在体内主动吸收需要维生素D，维生素D缺乏或不足时，钙主动吸收下降间接造成改缺乏。此外，运动锻炼也是骨骼健康的重要决定因素，跑、跳等中等程度的运动有利于骨骼钙沉积，达到更高的估量峰值。'
          }
        }
  
        form.value.elTextThree = res.data.data.doctor_advice;
  
      })
  
      imgUrl.value = "http://"+baseUrl+'/';
  
      let params = {
        'groupId': groupId.value,
        'id': id.value,
        'reportId': reportId.value,
  
        'username': username.value,
        'guardian': guardian.value,
        'birth': birthStatus.value,
      }
      const data = await api.energy(params);
  
      if(data.data.code == 0) {
        ElMessage.error(data.data.msg)
        await router.push({'path':'/Evaluation/' + groupId.value +'/'+ id})
      }
  
      if(!data.data.data.diet_analysis) {
        ElMessage.error(data.data.msg)
        await router.push({'path':'/Evaluation/' + groupId.value +'/'+ id})
      }
      for(let i = 0; i< data.data.data.diet_analysis.length; i++) {
        switch (i){
          case 0:
            data.data.data.diet_analysis[i]['pName'] = '周一';
            break
          case 1:
            data.data.data.diet_analysis[i]['pName'] = '周二';
            break
          case 2:
            data.data.data.diet_analysis[i]['pName'] = '周三';
            break
          case 3:
            data.data.data.diet_analysis[i]['pName'] = '周四';
            break
          case 4:
            data.data.data.diet_analysis[i]['pName'] = '周五';
            break
          case 5:
            data.data.data.diet_analysis[i]['pName'] = '周六';
            break
          case 6:
            data.data.data.diet_analysis[i]['pName'] = '周日';
            break
        }
      }
  
  
      diet_analysis.value = data.data.data.diet_analysis;
  
      for(let i = 0; i< data.data.data.diet.length; i++) {
        letEnergy._value.energy = letEnergy._value.energy + parseInt(data.data.data.diet[i]['energy']);
        protein._value.energy = protein._value.energy + parseInt(data.data.data.diet[i]['protein']);
        fat._value.energy = fat._value.energy + parseInt(data.data.data.diet[i]['fat']);
        carbohydrate._value.energy = carbohydrate._value.energy + parseInt(data.data.data.diet[i]['carbohydrate']);
        calcium._value.energy = calcium._value.energy + parseInt(data.data.data.diet[i]['calcium']);
        sodium._value.energy = sodium._value.energy + parseInt(data.data.data.diet[i]['sodium']);
        magnesium._value.energy = magnesium._value.energy + parseInt(data.data.data.diet[i]['magnesium']);
        iron._value.energy = iron._value.energy + parseInt(data.data.data.diet[i]['iron']);
        zinc._value.energy = zinc._value.energy + parseInt(data.data.data.diet[i]['zinc']);
        selenium._value.energy = selenium._value.energy + parseInt(data.data.data.diet[i]['selenium']);
        vitamin_a._value.energy = vitamin_a._value.energy + parseInt(data.data.data.diet[i]['vitamin_a']);
        vitamin_e._value.energy = vitamin_e._value.energy + parseInt(data.data.data.diet[i]['vitamin_e']);
        vitamin_b1._value.energy = vitamin_b1._value.energy + parseInt(data.data.data.diet[i]['vitamin_b1']);
        vitamin_b2._value.energy = vitamin_b2._value.energy + parseInt(data.data.data.diet[i]['vitamin_b2']);
        vitamin_c._value.energy = vitamin_c._value.energy + parseInt(data.data.data.diet[i]['vitamin_c']);
      }
  
  
    
      letEnergy._value.start = data.data.data.packAge[0].start_package;
      letEnergy._value.end = data.data.data.packAge[0].end_package;
      letEnergy._value.keyword = '✔ 正常';
      letEnergy._value.color = 'everyBlack';
  
   
  
  
      protein._value.start = data.data.data.packAge[1].start_package;
      protein._value.end = data.data.data.packAge[1].end_package;
      protein._value.keyword = '✔ 正常';
      protein._value.color = 'everyBlack';
      if ( protein._value.energy < protein._value.start) {
        protein._value.keyword = '▼ 不足';
        protein._value.color = 'everyRed';
      } else if( protein._value.energy > protein._value.end) {
        protein._value.keyword = '▲ 超标';
        protein._value.color = 'everyOrange';
      }
  
      fat._value.start = data.data.data.packAge[2].start_package;
      fat._value.end = data.data.data.packAge[2].end_package;
      fat._value.keyword = '✔ 正常';
      fat._value.color = 'everyBlack';
      if ( fat._value.energy < fat._value.start) {
        fat._value.keyword = '▼ 不足';
        fat._value.color = 'everyRed';
      } else if( fat._value.energy > fat._value.end) {
        fat._value.keyword = '▲ 超标';
        fat._value.color = 'everyOrange';
      }
  
      carbohydrate._value.start = data.data.data.packAge[3].start_package;
      carbohydrate._value.end = data.data.data.packAge[3].end_package;
      carbohydrate._value.keyword = '✔ 正常';
      carbohydrate._value.color = 'everyBlack';
      if ( carbohydrate._value.energy < carbohydrate._value.start) {
        carbohydrate._value.keyword = '▼ 不足';
        carbohydrate._value.color = 'everyRed';
      } else if( carbohydrate._value.energy > carbohydrate._value.end) {
        carbohydrate._value.keyword = '▲ 超标';
        carbohydrate._value.color = 'everyOrange';
      }
  
      calcium._value.start = data.data.data.packAge[4].start_package;
      calcium._value.end = data.data.data.packAge[4].end_package;
      calcium._value.keyword = '✔ 正常';
      calcium._value.color = 'everyBlack';
      if ( calcium._value.energy < calcium._value.start) {
        calcium._value.keyword = '▼ 不足';
        calcium._value.color = 'everyRed';
      } else if( calcium._value.energy > calcium._value.end) {
        calcium._value.keyword = '▲ 超标';
        calcium._value.color = 'everyOrange';
      }
  
      sodium._value.start = data.data.data.packAge[5].start_package;
      sodium._value.end = data.data.data.packAge[5].end_package;
      sodium._value.keyword = '✔ 正常';
      sodium._value.color = 'everyBlack';
      if ( sodium._value.energy < sodium._value.start) {
        sodium._value.keyword = '▼ 不足';
        sodium._value.color = 'everyRed';
      } else if( sodium._value.energy > sodium._value.end) {
        sodium._value.keyword = '▲ 超标';
        sodium._value.color = 'everyOrange';
      }
  
      magnesium._value.start = data.data.data.packAge[6].start_package;
      magnesium._value.end = data.data.data.packAge[6].end_package;
      magnesium._value.keyword = '✔ 正常';
      magnesium._value.color = 'everyBlack';
      if ( magnesium._value.energy < magnesium._value.start) {
        magnesium._value.keyword = '▼ 不足';
        magnesium._value.color = 'everyRed';
      } else if( magnesium._value.energy > magnesium._value.end) {
        magnesium._value.keyword = '▲ 超标';
        magnesium._value.color = 'everyOrange';
      }
  
      iron._value.start = data.data.data.packAge[7].start_package;
      iron._value.end = data.data.data.packAge[7].end_package;
      iron._value.keyword = '✔ 正常';
      iron._value.color = 'everyBlack';
      if ( iron._value.energy < iron._value.start) {
        iron._value.keyword = '▼ 不足';
        iron._value.color = 'everyRed';
      } else if( iron._value.energy > iron._value.end) {
        iron._value.keyword = '▲ 超标';
        iron._value.color = 'everyOrange';
      }
  
      zinc._value.start = data.data.data.packAge[8].start_package;
      zinc._value.end = data.data.data.packAge[8].end_package;
      zinc._value.keyword = '✔ 正常';
      zinc._value.color = 'everyBlack';
      if ( zinc._value.energy < zinc._value.start) {
        zinc._value.keyword = '▼ 不足';
        zinc._value.color = 'everyRed';
      } else if( zinc._value.energy > zinc._value.end) {
        zinc._value.keyword = '▲ 超标';
        zinc._value.color = 'everyOrange';
      }
  
      selenium._value.start = data.data.data.packAge[9].start_package;
      selenium._value.end = data.data.data.packAge[9].end_package;
      selenium._value.keyword = '✔ 正常';
      selenium._value.color = 'everyBlack';
      if ( selenium._value.energy < selenium._value.start) {
        selenium._value.keyword = '▼ 不足';
        selenium._value.color = 'everyRed';
      } else if( selenium._value.energy > selenium._value.end) {
        selenium._value.keyword = '▲ 超标';
        selenium._value.color = 'everyOrange';
      }
  
      vitamin_a._value.start = data.data.data.packAge[10].start_package;
      vitamin_a._value.end = data.data.data.packAge[10].end_package;
      vitamin_a._value.keyword = '✔ 正常';
      vitamin_a._value.color = 'everyBlack';
      if ( vitamin_a._value.energy < vitamin_a._value.start) {
        vitamin_a._value.keyword = '▼ 不足';
        vitamin_a._value.color = 'everyRed';
      } else if( vitamin_a._value.energy > vitamin_a._value.end) {
        vitamin_a._value.keyword = '▲ 超标';
        vitamin_a._value.color = 'everyOrange';
      }
  
      vitamin_e._value.start = data.data.data.packAge[11].start_package;
      vitamin_e._value.end = data.data.data.packAge[11].end_package;
      vitamin_e._value.keyword = '✔ 正常';
      vitamin_e._value.color = 'everyBlack';
      if ( vitamin_e._value.energy < vitamin_e._value.start) {
        vitamin_e._value.keyword = '▼ 不足';
        vitamin_e._value.color = 'everyRed';
      } else if( vitamin_e._value.energy > vitamin_e._value.end) {
        vitamin_e._value.keyword = '▲ 超标';
        vitamin_e._value.color = 'everyOrange';
      }
  
      vitamin_b1._value.start = data.data.data.packAge[12].start_package;
      vitamin_b1._value.end = data.data.data.packAge[12].end_package;
      vitamin_b1._value.keyword = '✔ 正常';
      vitamin_b1._value.color = 'everyBlack';
      if ( vitamin_b1._value.energy < vitamin_b1._value.start) {
        vitamin_b1._value.keyword = '▼ 不足';
        vitamin_b1._value.color = 'everyRed';
      } else if( vitamin_b1._value.energy > vitamin_b1._value.end) {
        vitamin_b1._value.keyword = '▲ 超标';
        vitamin_b1._value.color = 'everyOrange';
      }
  
      vitamin_b2._value.start = data.data.data.packAge[13].start_package;
      vitamin_b2._value.end = data.data.data.packAge[13].end_package;
      vitamin_b2._value.keyword = '✔ 正常';
      vitamin_b2._value.color = 'everyBlack';
      if ( vitamin_b2._value.energy < vitamin_b2._value.start) {
        vitamin_b2._value.keyword = '▼ 不足';
        vitamin_b2._value.color = 'everyRed';
      } else if( vitamin_b2._value.energy > vitamin_b2._value.end) {
        vitamin_b2._value.keyword = '▲ 超标';
        vitamin_b2._value.color = 'everyOrange';
      }
  
      vitamin_c._value.start = data.data.data.packAge[14].start_package;
      vitamin_c._value.end = data.data.data.packAge[14].end_package;
      vitamin_c._value.keyword = '✔ 正常';
      vitamin_c._value.color = 'everyBlack';
      if ( vitamin_c._value.energy < vitamin_c._value.start) {
        vitamin_c._value.keyword = '▼ 不足';
        vitamin_c._value.color = 'everyRed';
      } else if( vitamin_c._value.energy > vitamin_c._value.end) {vitamin_c
        vitamin_c._value.keyword = '▲ 超标';
        vitamin_c._value.color = 'everyOrange';
      }
  
  
      setTimeout(() => {
        print('print-all')
      }, 2000)
    } else {
      ElMessage.error('栏目编号不得为空')
      await router.push({'path': '/Home'})
    }
  }
  const pageList = async () => {
    await router.push({'path': '/pageList/' + groupId.value})
  }
  onMounted(() => {
    fetchData()
  })
  
  onMounted(() => { // 需要获取到element,所以是onMounted的Hook
    http.get('api/archives/viewreport?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=>{
  
  
      data.value = res.data.data
      // 能量
  
      // if ( letEnergy._value.energy < letEnergy._value.start) {
      //   energys.value = data.value.foodmotion[2].content;
      //   letEnergy._value.keyword = '▼ 不足';
      //   letEnergy._value.color = 'everyRed';
      //   kcalType.value = 3
      // } else if( letEnergy._value.energy > letEnergy._value.end) {
      //   letEnergy._value.keyword = '▲ 超标';
      //   letEnergy._value.color = 'everyOrange';
      //   kcalType.value = 1
      // }
      if (letEnergy._value.energy < letEnergy._value.start) {
        principle.value=data.value.foodliving[2].content;
        energys.value = data.value.foodmotion[2].content;
        letEnergy._value.keyword = '▼ 不足';
        letEnergy._value.color = 'everyRed';
        kcalType.value = 3
      } else if (letEnergy._value.energy > letEnergy._value.end) {
        principle.value=data.value.foodliving[1].content;
        energys.value = data.value.foodmotion[0].content;
        letEnergy._value.keyword = '▲ 超标';
        letEnergy._value.color = 'everyOrange';
        kcalType.value = 1
      } else {
        principle.value=data.value.foodliving[0].content;
        energys.value = data.value.foodmotion[1].content;
      }
      //  蛋白质
      if (protein._value.energy < protein._value.start) {
        proteins.value = data.value.foodmotion[5].content;
        protein._value.keyword = '▼ 不足';
        protein._value.color = 'everyRed';
      } else if (protein._value.energy > protein._value.end) {
        proteins.value = data.value.foodmotion[3].content;
        protein._value.keyword = '▲ 超标';
        protein._value.color = 'everyOrange';
      } else {
        proteins.value = data.value.foodmotion[4].content;
      }
      //脂肪
      if (fat._value.energy < fat._value.start) {
        fats.value = data.value.foodmotion[8].content;
        fat._value.keyword = '▼ 不足';
        fat._value.color = 'everyRed';
      } else if (fat._value.energy > fat._value.end) {
        fats.value = data.value.foodmotion[6].content;
        fat._value.keyword = '▲ 超标';
        fat._value.color = 'everyOrange';
      } else {
        fats.value = data.value.foodmotion[7].content;
      }
      //碳水化合物
      if (carbohydrate._value.energy < carbohydrate._value.start) {
        carbohydrates.value = data.value.foodmotion[11].content;
        carbohydrate._value.keyword = '▼ 不足';
        carbohydrate._value.color = 'everyRed';
      } else if (carbohydrate._value.energy > carbohydrate._value.end) {
        carbohydrates.value = data.value.foodmotion[9].content;
        carbohydrate._value.keyword = '▲ 超标';
        carbohydrate._value.color = 'everyOrange';
      } else {
        carbohydrates.value = data.value.foodmotion[10].content;
      }
      //钙
      if (calcium._value.energy < calcium._value.start) {
        calciums.value = data.value.foodmotion[14].content;
        calcium._value.keyword = '▼ 不足';
        calcium._value.color = 'everyRed';
      } else if (calcium._value.energy > calcium._value.end) {
        calciums.value = data.value.foodmotion[12].content;
        calcium._value.keyword = '▲ 超标';
        calcium._value.color = 'everyOrange';
      } else {
        calciums.value = data.value.foodmotion[13].content;
      }
      //钠
      if (sodium._value.energy < sodium._value.start) {
        sodiums.value = data.value.foodmotion[17].content;
        sodium._value.keyword = '▼ 不足';
        sodium._value.color = 'everyRed';
      } else if (sodium._value.energy > sodium._value.end) {
        sodiums.value = data.value.foodmotion[15].content;
        sodium._value.keyword = '▲ 超标';
        sodium._value.color = 'everyOrange';
      } else {
        sodiums.value = data.value.foodmotion[16].content;
      }
      //镁
      if (magnesium._value.energy < magnesium._value.start) {
        magnesiums.value = data.value.foodmotion[20].content;
        magnesium._value.keyword = '▼ 不足';
        magnesium._value.color = 'everyRed';
      } else if (magnesium._value.energy > magnesium._value.end) {
        magnesiums.value = data.value.foodmotion[18].content;
        magnesium._value.keyword = '▲ 超标';
        magnesium._value.color = 'everyOrange';
      } else {
        magnesiums.value = data.value.foodmotion[19].content;
      }
      //铁
      if (iron._value.energy < iron._value.start) {
        irons.value = data.value.foodmotion[23].content;
        iron._value.keyword = '▼ 不足';
        iron._value.color = 'everyRed';
      } else if (iron._value.energy > iron._value.end) {
        irons.value = data.value.foodmotion[21].content;
        iron._value.keyword = '▲ 超标';
        iron._value.color = 'everyOrange';
      } else {
        irons.value = data.value.foodmotion[22].content;
      }
      //锌
      if (zinc._value.energy < zinc._value.start) {
        zincs.value = data.value.foodmotion[26].content;
        zinc._value.keyword = '▼ 不足';
        zinc._value.color = 'everyRed';
      } else if (zinc._value.energy > zinc._value.end) {
        zincs.value = data.value.foodmotion[24].content;
        zinc._value.keyword = '▲ 超标';
        zinc._value.color = 'everyOrange';
      } else {
        zincs.value = data.value.foodmotion[25].content;
      }
      //硒
      if (selenium._value.energy < selenium._value.start) {
        seleniums.value = data.value.foodmotion[29].content;
        selenium._value.keyword = '▼ 不足';
        selenium._value.color = 'everyRed';
      } else if (selenium._value.energy > selenium._value.end) {
        seleniums.value = data.value.foodmotion[27].content;
        selenium._value.keyword = '▲ 超标';
        selenium._value.color = 'everyOrange';
      } else {
        seleniums.value = data.value.foodmotion[28].content;
      }
      //维生素A
      if (vitamin_a._value.energy < vitamin_a._value.start) {
        vitamin_as.value = data.value.foodmotion[32].content;
        vitamin_a._value.keyword = '▼ 不足';
        vitamin_a._value.color = 'everyRed';
      } else if (vitamin_a._value.energy > vitamin_a._value.end) {
        vitamin_as.value = data.value.foodmotion[30].content;
        vitamin_a._value.keyword = '▲ 超标';
        vitamin_a._value.color = 'everyOrange';
      } else {
        vitamin_as.value = data.value.foodmotion[31].content;
      }
      //维生素E
      if (vitamin_e._value.energy < vitamin_e._value.start) {
        vitamin_es.value = data.value.foodmotion[35].content;
        vitamin_e._value.keyword = '▼ 不足';
        vitamin_e._value.color = 'everyRed';
      } else if (vitamin_e._value.energy > vitamin_e._value.end) {
        vitamin_es.value = data.value.foodmotion[33].content;
        vitamin_e._value.keyword = '▲ 超标';
        vitamin_e._value.color = 'everyOrange';
      } else {
        vitamin_es.value = data.value.foodmotion[34].content;
      }
      //维生素B1
      if (vitamin_b1._value.energy < vitamin_b1._value.start) {
        vitamin_b1s.value = data.value.foodmotion[38].content;
        vitamin_b1._value.keyword = '▼ 不足';
        vitamin_b1._value.color = 'everyRed';
      } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
        vitamin_b1s.value = data.value.foodmotion[36].content;
        vitamin_b1._value.keyword = '▲ 超标';
        vitamin_b1._value.color = 'everyOrange';
      } else {
        vitamin_b1s.value = data.value.foodmotion[37].content;
      }
      //维生素B2
      if (vitamin_b2._value.energy < vitamin_b2._value.start) {
        vitamin_b2s.value = data.value.foodmotion[41].content;
        vitamin_b2._value.keyword = '▼ 不足';
        vitamin_b2._value.color = 'everyRed';
      } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
        vitamin_b2s.value = data.value.foodmotion[39].content;
        vitamin_b2._value.keyword = '▲ 超标';
        vitamin_b2._value.color = 'everyOrange';
      } else {
        vitamin_b2s.value = data.value.foodmotion[40].content;
      }
      //维生素C
      if (vitamin_c._value.energy < vitamin_c._value.start) {
        vitamin_cs.value = data.value.foodmotion[44].content;
        vitamin_c._value.keyword = '▼ 不足';
        vitamin_c._value.color = 'everyRed';
      } else if (vitamin_c._value.energy > vitamin_c._value.end) {
        vitamin_cs.value = data.value.foodmotion[42].content;
        vitamin_c._value.keyword = '▲ 超标';
        vitamin_c._value.color = 'everyOrange';
      } else {
        vitamin_cs.value = data.value.foodmotion[43].content;
      }
  
  
      early_intervention.value = res.data.data.high_contents.intervention_one + res.data.data.high_contents.intervention_two + res.data.data.high_contents.intervention_three;
      Monitoring_content.value = res.data.data.high_contents.family_1 + res.data.data.high_contents.family_2 + res.data.data.high_contents.family_3 + res.data.data.high_contents.family_4 + res.data.data.high_contents.family_5 + res.data.data.high_contents.family_6 + res.data.data.high_contents.family_7 + res.data.data.high_contents.family_8 + res.data.data.high_contents.family_9 + res.data.data.high_contents.family_10 + res.data.data.high_contents.family_11 + res.data.data.high_contents.family_12 + res.data.data.high_contents.family_13
      high_contents.value = res.data.data.high_contents
      hospital_name.value = res.data.data.hospital_name
      diet.value = res.data.data.diet
      pagoda.value = res.data.data.pagoda
        // proposal.filter((ite,index)=>{
        //     return ite.food_product_id==pagoda.food_product_id
  
        // })
      
      // principle.value = res.data.data.foodliving
      intake.value = res.data.data.foodmotion
      early_intervention.value=res.data.data.high_contents.intervention_one+res.data.data.high_contents.intervention_two+res.data.data.high_contents.intervention_three;
      Monitoring_content.value=res.data.data.high_contents.family_1+res.data.data.high_contents.family_2+res.data.data.high_contents.family_3+res.data.data.high_contents.family_4+res.data.data.high_contents.family_5+res.data.data.high_contents.family_6+res.data.data.high_contents.family_7+res.data.data.high_contents.family_8+res.data.data.high_contents.family_9+res.data.data.high_contents.family_10+res.data.data.high_contents.family_11+res.data.data.high_contents.family_12+res.data.data.high_contents.family_13
      high_contents.value=res.data.data.high_contents
      hospital_name.value = res.data.data.hospital_name
      diet.value = res.data.data.diet
      pagoda.value = res.data.data.pagoda
  
      let color = ["#3EA4AA"];
      let color1 = ["#D0443B", "#3EA4AA"];
      let color2 = ["#D0443B", "#3EA4AA"];
      let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
      var arr = [];
      var arr2 = [];
      var parr = res.data.data.contents.primaryHeight;
      for (let i = 0; i < parr.length; i++) {
        arr.push(parr[i].content);
        arr2.push(parr[i].month);
      }
      var arr1 = [];
      var arr3 = [];
      var parr1 = res.data.data.contents.primaryWeight;
      for (let i = 0; i < parr1.length; i++) {
        arr1.push(parr1[i].content);
        arr3.push(parr1[i].month);
      }
  
      var myChart = echarts.init(document.getElementById("myChart1"));
      myChart.value = myChart;
      myChart.setOption({
        backgroundColor: "#fff",
        color: color,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function() {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: [
          {
            name: "次数",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15]
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "BMI值",
            axisLabel: {
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "dotted"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: [
                  "rgba(83,148,208,0.15)",
                  "rgba(103,194,58,0.15)",
                  "rgba(226,203,80,0.15)",
                  "rgba(226,115,80,0.15)"
                ]
              }
            }
          }
        ],
        series: [
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1]
              }
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumBmi
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart.resize();
      });
  
      var myChart1 = echarts.init(document.getElementById("myChart2"));
      myChart1.value = myChart1;
      myChart1.setOption({
        backgroundColor: "#fff",
        color: color1,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function() {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15]
            },
            data: arr2
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "身高",
            axisLabel: {
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40
            }
          }
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[0]
              }
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color1[1]
              }
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumHeight
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart1.resize();
      });
  
      var myChart2 = echarts.init(document.getElementById("myChart3"));
      myChart2.value = myChart2;
      myChart2.setOption({
        backgroundColor: "#fff",
        color: color2,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function() {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: [
          {
            name: "月份",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15]
            },
            data: arr3
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "体重",
            axisLabel: {
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40
            }
          }
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[0]
              }
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "white",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: arr1
          },
          {
            name: "我的",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[1]
              }
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: res.data.data.contents.sumWeight
          }
        ]
      });
      window.addEventListener("resize", function() {
        myChart2.resize();
      });
    })
  
  });
  </script>
  
  <style scoped>
  
  .biao1{
    width:25%;border-bottom:1px solid #2196f3;border-right:1px solid #2196f3;background-color: #2196f3;color:#fff;
  }
  .biao5{
    width:25%;border-right:1px solid #2196f3;background-color: #2196f3;color:#fff;
  }
  .biao6{
    width:25%;border-right:1px solid #2196f3;color:#000;
  }
  .biao2{
    width:25%;border-bottom:1px solid #2196f3;border-right:1px solid #2196f3;color:#000;
  }
  .biao3{
    width:25%;border-bottom:1px solid #2196f3;background-color: #2196f3;color:#fff;
  }
  .biao4{
    width:75%;border-bottom:1px solid #2196f3;color:#000;
  }
  .biao7{
    width:25%;color:#000;border:2px solid #2196f3;
  }
  .params {
    width: 100%;
    font-size: 22px;
    font-weight: bold;
  }
  #basic .title {
    font-size: 36px;
    width: 100%;
    text-align: center;
  }
  #basic {
    font-size: 14px;
    width: 1075px;
    min-height: 1244px;
    overflow: hidden;
    padding: 0;
    word-break:break-all;
    margin: 60px auto 0 auto;
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-card-border-radius);
    background-color: var(--el-card-bg-color);
    /* color: var(--el-text-color-primary); */
    transition: var(--el-transition-duration);
    --el-card-border-color: var(--el-border-color-light, #ebeef5);
    --el-card-border-radius: 4px;
    --el-card-padding: 20px;
    --el-card-bg-color: var(--el-color-white);
  }
  #basic #createTime {
    font-size: 16px;
    color:#999999;
    float: right;
  }
  .subTitle {
    font-size: 30px;
    text-align: center;
    height: 30px;
    color: #2196f3;
  }
  
  .right-box-card {
    margin-left: 2%;
    margin-top: 1%;
    position: static;
    top: calc(260px);
    width: 60%;
    float: left;
    /*min-height: 650px;*/
  }
  
  .images-wrapper {
    width: 100%;
    position: relative;
    height: 173px;
    font-weight: bold;
  }
  .foodsNames {
    color:red;
  }
  
  
  .images-content {
    position: absolute;
    z-index: 1;
    line-height: 54px;
    top: calc(55% - 54px);
    overflow: hidden;
    margin-left: 55%;
    font-size: 18px;
  
  }
  
  .service_plate {
    background: url('../../assets/img/evaluaction_service_plate.png') center no-repeat;
  }
  
  .dietOn {
    height: 510px;
  }
  
  .everyRed {
    color:red;
  }
  
  .everyOrange {
    color:orange;
  }
  
  .everyBlack {
    color:#333333;
  }
  
  .time-botton {
    background-color: #2196f3;
    width: 108px;
    height: 41px;
    color: #fff;
    font-size: 16px;
    border-radius: 100px;
    line-height: 41px;
    margin: 42px 0 0 40px;
    text-align: center;
  }
  
  .time-type {
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    background: #85CE61;
    border-radius: 50%;
    opacity: 1;
    color: #fff;
    box-shadow: 5px 5px 2px #888888;
    margin: 20px 0 20px 40%;
  }
  
  .der{
    width: 240px;
    height: 174px;
    background: url("../../assets/img/evaluaction_service_plate.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .platesFoods{
    margin-top: 5px;
    margin-left: 8px;
  
    color: #333333;
    font-size: 16px;
  }
  .platesFoods div {
    padding-bottom: 18px;
  
  }
  .platesFoods span{
    color: #666666;
  }
  
  .plates {
    width: 33%;
    float: left;
  }
  
  .plates .plates-top-img {
    float: left;
    margin-left: 1%;
    width: 30%;
  }
  
  .time-left-color {
    background: #85CE61;
  }
  
  .time-common-color {
    background: #E8B973;
  }
  
  .time-right-color {
    background: #6EA9E0;
  }
  
  .images-lab {
    position: absolute;
    z-index: 1;
    line-height: 54px;
    top: calc(85% - 54px);
    overflow: hidden;
    margin-left: 55%;
    font-size: 50px;
  }
  
  #params {
    margin-top: 3%;
    font-size: 22px;
    font-weight: bold;
  }
  
  .shu {
    width: 5px;
    height: 30px;
    background: #2196f3;
    opacity: 1;
    border-radius: 100px;
    float: left;
    margin-right: 2%;
    margin-left: 3%;
  }
  
  #params span {
    font-size: 15px;
    color: #666;
    margin-left: 2%;
  }
  
  li {
    list-style-type: none;
  }
  
  #params ul {
    margin-left: 3%;
  }
  
  .topColor {
    color: #E8B973;
  }
  
  .topBgColor {
    border: 1px solid #E8B973;
    background-color: #E8B973;
  }
  
  .normalColor {
    color: #2196f3;
  }
  
  .normalBgColor {
    border: 1px solid #2196f3;
    background-color: #2196f3;
  }
  
  .bottomColor {
    color: #6CA9E3;
  }
  
  .bottomBgColor {
    border: 1px solid #6CA9E3;
    background-color: #6CA9E3;
  }
  
  .images-lab span {
    font-size: 18px;
  }
  
  .images-right {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 15%;
    height: 20%;
    line-height: 34px;
    top: calc(95% - 54px);
    overflow: hidden;
    margin-left: 75%;
    font-size: 18px;
    border-radius: 30px;
    color: #fff;
    text-align: center;
  }
  
  
  #enerty .bt {
    background: #F7F7F7;
    color: #fff;
  }
  
  #enerty .bt span {
    width: 25%;
    float: left;
    text-align: center;
    color: #999999;
    line-height: 30px;
  }
  
  #enerty ul li {
    width: 48%;
    display: inline-block;
    margin: 0;
  }
  
  #enerty .element span {
    width: 25%;
    float: left;
    text-align: center;
    line-height: 60px;
    font-size: 14px;
  }
  
  </style>
  